<template>
  <div class="app-container">
    <!-- <span class="title">个人申请与审核</span>
    <el-divider></el-divider> -->
    <div class="filter-container">
      <el-form inline>
        <el-form-item label="项目类型">
          <el-select @change="selectProjectType" placeholder="项目类型" v-model="listQuery.type">
            <el-option v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.type" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属区县">
          <el-select placeholder="所属区县" v-model="listQuery.district" clearable>
            <el-option v-for="(item,index) in quxianList" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="年度" clearable>
          <el-select placeholder="年度" v-model="listQuery.year">
            <el-option v-for="(item,index) in nianduList" :key="index" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="指标使用类型">
          <el-select placeholder="指标使用类型" v-model="listQuery.projectType" clearable>
            <el-option v-for="(item,index) in zhibiaoList" :key="index" :label="item.name" :value="item.projectType" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="changePage()" type="primary">查询</el-button>
          <el-button @click="daochu()" type="primary">导出报表</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table v-show="listQuery.type == 1" v-loading="listLoading" :data="list" element-loading-text="加载中" highlight-current-row>
      <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="district" label="区县"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="projectName" label="项目名称"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="year" label="年度"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="type" label="指标使用类型"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="address" label="位置"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="tfh" label="图幅号"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="gq" label="工期"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip label="建设用地复垦规模">
        <el-table-column align="center" show-overflow-tooltip prop="jsydfkgm" label="合计"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip label="宅基地">
          <el-table-column align="center" show-overflow-tooltip prop="fwzd" label="房屋占地"></el-table-column>
          <el-table-column align="center" show-overflow-tooltip prop="fsyd" label="附属用地"></el-table-column>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="qtjsyd" label="其他建筑用地"></el-table-column>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="jsjsyd" label="预计减少建设用地"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip label="预计增加农用地">
        <el-table-column align="center" show-overflow-tooltip prop="zjnyd" label="合计"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="zjgd" label="耕地"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="zjqt" label="其他"></el-table-column>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip label="预算投资金额">
        <el-table-column align="center" show-overflow-tooltip prop="ystzje" label="合计"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip label="工程施工费">
          <el-table-column align="center" show-overflow-tooltip prop="gcsgf" label="小计"></el-table-column>
          <el-table-column align="center" show-overflow-tooltip prop="ccgcf" label="拆除工程"></el-table-column>
          <el-table-column align="center" show-overflow-tooltip prop="tdpzf" label="土地平整"></el-table-column>
          <el-table-column align="center" show-overflow-tooltip prop="ntslf" label="农田水利"></el-table-column>
          <el-table-column align="center" show-overflow-tooltip prop="tjdlf" label="田间道路"></el-table-column>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="qtfy" label="其他"></el-table-column>
      </el-table-column>
    </el-table>

    <el-table v-show="listQuery.type == 2" v-loading="listLoading" :data="list" element-loading-text="加载中" highlight-current-row>
      <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="distName" label="区县"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="projectName" label="项目名称"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="year" label="年度"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="location" label="项目位置"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="duration" label="工期"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip label="预计建设总规模">
        <el-table-column align="center" show-overflow-tooltip prop="constrPredictTotalArea" label="合计"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="constrPredictOrganizeArea" label="预计整理规模"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="constrPredictDevelopArea" label="预计开发规模"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="constrPredictReclaimArea" label="预计复垦规模"></el-table-column>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip label="预计新增耕地总面积">
        <el-table-column align="center" show-overflow-tooltip prop="constrPredictNewFarmland" label="合计"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="constrPredictOrganizeFarmland" label="预计新增整理耕地面积"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="constrPredictDevelopFarmland" label="预计新增开发耕地面积"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="constrPredictReclaimFarmland" label="预计新增复垦耕地面积"></el-table-column>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip label="工程总投资">
        <el-table-column align="center" show-overflow-tooltip prop="projectTotalInvestment" label="合计"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="projectConstructionFee" label="工程施工费"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="projectEquipmentCost" label="设备购置费"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="projectUnpredictableCost" label="不可预见费用"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="projectOtherCost" label="其他费用"></el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getMyDownListType,getDistList,projectBackAdministrationData,yearList,projectTypeEnumList,projectBackAdministrationDataTwo } from "@/api/tongji";
export default {
  filters: {},
  data() {
    return {
      list: null,
      total: null,
      listLoading: false,
      listQuery: {
        district: '',
        year: 2019,
        type: 1,
        projectType: ''
      },
      typeList:[], //项目类型列表
      quxianList:[], //区县列表
      nianduList:[], //年度列表
      zhibiaoList:[], //指标类型列表
    };
  },
  created() {
    this.getTypeList()
    this.getAreaData()
    this.getYearList()
    this.fetchData()
    this.getZhibiao(this.listQuery.type)
  },
  methods: {
    //导出
    daochu(){
      var a = document.createElement("a");
      var obj = ""
      var checkNullorNot = 0
      var objArr = this.listQuery
      for (var index in objArr) {
        if(objArr[index]!==''&&objArr[index]!=null){
          obj += "&" + index + "=" + objArr[index]
          checkNullorNot++
        }
      }
      if(checkNullorNot != 0){
        obj = obj.substr(1)
        obj = '?' + obj
      }
      console.log(obj,"携带参数")
      a.setAttribute(
        "href",
        this.$https +
          "/renovation/project/export/exportProjectBackAdministrationData" + obj
      );
      a.click();
    },
    //获取指标类型
    getZhibiao(data){
      var mainData={
        type:data
      }
      projectTypeEnumList(mainData).then(res =>{
        this.zhibiaoList = res.data
      })
    },
    //选择项目类型
    selectProjectType(val){
      this.fetchData()
      this.getZhibiao(val)
      this.listQuery.district=''
      this.listQuery.projectType=''
    },
    //获取所有年份
    getYearList(){
      yearList().then(res =>{
        this.nianduList = res.data
        if(res.data&&res.data.length!=0){
          this.listQuery.year = res.data[0]
        }
      })
    },
    //获取所有项目类型
    getTypeList(){
      getMyDownListType().then(res =>{
        var arr = []
        res.data.forEach((v,i)=>{
          if(v.type == 1 || v.type == 2){
            arr.push(v)
          }
        })
        this.typeList = arr
      })
    },
    //获取所有区县
    getAreaData(){
      getDistList().then(res =>{
        this.quxianList = res.data
      })
    },
    fetchData() {
      this.listLoading = true;
      var data={}
      var objArr=this.listQuery
      for (var index in objArr) {
        if(objArr[index]!==''&&objArr[index]!=null){
          data[index]=objArr[index];
        }
      }
      if(this.listQuery.type == 1){
        projectBackAdministrationDataTwo(data)
        .then(res => {
          this.listLoading = false;
          this.list = res.data;
        })
        .catch(err => {
          this.listLoading = false;
        });
      }else if(this.listQuery.type == 2){
        projectBackAdministrationData(data)
        .then(res => {
          this.listLoading = false;
          this.list = res.data;
        })
        .catch(err => {
          this.listLoading = false;
        });
      }
    },
    changePage(page) {
      this.listQuery.page = page;
      this.fetchData();
    }
  }
};
</script>
